<template>
  <div class="play-dis">
    <div class="dis rotates">
      <div class="outer">
        <img :src="url" alt="" class="img" :style="{animationPlayState: status}" />
      </div>
      <div class="swing">
        <img
          :style="{ transform: deg}"
          src="../../assets/images/cd_tou.png"
          alt=""
        />
      </div>
    </div>
    <ul class="btns">
      <li class="item" @click="addToLove">
        <a-icon type="heart" class="ico heart" theme="filled" />
      </li>
      <li class="item">
        <a-icon type="folder-add" class="ico" />
      </li>
      <li class="item">
        <a-icon type="download" class="ico" />
      </li>
      <li class="item">
        <a-icon type="share-alt" class="ico" />
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "@/utils/axios";
export default {
  name: "PlayDis",
  data() {
    return {
      url:
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3924745974,4264782546&fm=26&gp=0.jpg",
      id: "",
      isRotate: true,
      deg: "rotate(-60)",
      status: 'paused'
    };
  },
  methods: {
    addToLove() {
      axios
        .get("/like", { params: { id: this.id, like: true } })
        .then((res) => {
          if (res.code === 200) {
            this.$message.success("添加成功");
          }
        });
    },
  },
  created() {
    this.$bus.$on("sendImgUrl", (obj) => {
      const { id, url } = obj;
      this.url = url;
      this.id = id;
    });
    this.$bus.$on("changeStutas", () => {
      if (this.$store.state.running) {
        this.status = 'running';
        this.deg = `rotate(-30deg)`;
      } else {
        this.status = 'paused';
        this.deg = `rotate(-60deg)`;
      }
    });
  },
  mounted() {
    const id = localStorage.getItem("id");
    if (id) {
      this.id = id;
    }
  },
};
</script>

<style lang="scss" scoped>
.play-dis {
  display: flex;
  width: 45rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .dis {
    position: relative;
    width: 30rem;
    height: 30rem;
    background: #000;
    border-radius: 50%;
    text-align: center;
    line-height: 30rem;
    border: 0.5rem solid #ccc;
    cursor: pointer;
    .outer {
      img {
        width: 15rem;
        height: 15rem;
        border-radius: 50%;
      }
    }
    .swing {
      position: absolute;
      top: -15rem;
      left: 50%;
      transform: translateX(-50%);
      img {
        width: 6rem;
        height: 16rem;
        transform: rotateZ(-60deg);
        transform-origin: 3rem 0;
        transition: all 0.4s linear;
      }
      img.no-play {
        transform: rotateZ(-30deg);
      }
    }
  }
  .dis.rotates {
    .img {
      animation: rotates 20s linear infinite;
      animation-play-state: paused; // running
    }
    @keyframes rotates {
      from {
        transform: rotateZ(0deg);
      }
      to {
        transform: rotateZ(360deg);
      }
    }
  }
  .btns {
    display: flex;
    margin-top: 3rem;
    .item {
      width: 4rem;
      height: 4rem;
      margin: 0 1.5rem;
      background: #f5f5f5;
      border-radius: 50%;
      cursor: pointer;
      text-align: center;
      line-height: 4rem;
      .heart {
        color: #f40;
      }
    }
  }
}
</style>